<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()" />

      <div class="btn-box">
        <a
          class="el-button el-button--success el-button--medium"
          href="http://123.57.59.222:8081/api/file/po_course_template.xlsx"
          type="primary"
        >模版下载</a>
        <el-upload
          :action="UploadUrl()"
          :show-file-list="false"
          :on-success="handleImageSuccess"
          class="upload_image"
        >
          <el-button v-show="roleName==&quot;admin&quot;" type="primary">导入</el-button>
        </el-upload>
        <el-button
          :loading="downloadLoading"
          type="primary"
          icon="el-icon-document"
          @click="dowloadExcel"
        >导出excel</el-button>
      </div>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item label="PO">
          <el-input v-model="listQuery.po" placeholder="PO" />
        </el-form-item>
        <el-form-item width="200px" label="客户名称">
          <el-input
            v-model="listQuery.customerName"
            placeholder="客户名称"
          />
        </el-form-item>
        <el-form-item width="200px" label="课程名称">
          <el-input
            v-model="listQuery.courseName"
            placeholder="课程名称"
          />
        </el-form-item>
        <el-form-item class="" label="状态">
          <el-select v-model="listQuery.courseState">
            <el-option label="未启动" value="未启动" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已交付" value="已交付" />
            <el-option label="已验收" value="已验收" />
            <el-option label="已完结" value="已完结" />
            <el-option label="已终止" value="已终止" />
          </el-select>
        </el-form-item>
        <el-form-item class="regin_search" label="课程编导">
          <el-select
            v-model="listQuery.courseChargeName"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in courseChargeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="战区">
          <el-select
            v-model="listQuery.regionName"
            filterable

            clearable
            placeholder="请选择"
            @change="handleChangePro4($event)"
          >
            <el-option
              v-for="item in regiosList"
              :key="item.id"
              :label="item.region"
              :value="item.region"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-select
            v-model="listQuery.provinceName"
            filterable

            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in allProvinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.province"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList()">查询</el-button>
          <!-- <el-button type="primary" @click="handleAdd()">新增课程</el-button>
        <el-button type="primary" @click="handleExport()">导入课程</el-button>-->
        </el-form-item>
      </div>
    </el-form>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{ row }">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>

      <el-table-column sort align="center" width="100px" label="战区">
        <template slot-scope="{ row }">
          <span>{{ row.regionName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="省份">
        <template slot-scope="{ row }">
          <span>{{ row.provinceName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" label="成功部门">
        <template slot-scope="{ row }">
          <span>{{ row.teamName }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" width="200px" label="客户名称">
        <template slot-scope="{ row }">
          <span>{{ row.customerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              v-model="corsesList.courseChargeName"
              filterable
              placeholder="请选择"
              @change="handleCouseChangeName($event)"
            >
              <el-option
                v-for="item in courseChargeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <span>{{ row.courseId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学科门类">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select v-model="corsesList.subjectCategoryName" filterable placeholder="请选择" @change="handleChangeSubject($event)">
              <el-option
                v-for="item in subjectTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.subjectCategoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="专业分类">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input
              v-model="corsesList.majorCategory"
              placeholder="请选择"
            />
          </template>
          <span v-else>{{ row.majorCategory }}</span>
        </template>
      </el-table-column>
      <el-table-column sort align="center" width="180px" label="课程名称">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.courseName" />
          </template>
          <span v-else>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="前期沟通进度">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              v-model="corsesList.earlyExchangeName"
              filterable
              placeholder="请选择"
              @change="handleChangePro2($event)"
            >
              <el-option
                v-for="item in courseExchange"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.earlyExchangeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label=" 讲师姓名">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.teacher" placeholder />
          </template>
          <span v-else>{{ row.teacher }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" label="联系方式">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.phone" placeholder />
          </template>
          <span v-else>{{ row.phone }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="120px" label="课程类别">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              v-model="corsesList.courseTypeName"
              filterable
              placeholder="请选择"
              @change="handleChangePro5($event)"
            >
              <el-option
                v-for="item in courseTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.courseTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拍摄形式">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              v-model="corsesList.shootModeName"
              filterable
              placeholder="请选择"
              @change="handleChangePro7($event)"
            >
              <el-option
                v-for="item in shootModeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.shootModeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="预估数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.estimateQuantity" />
          </template>
          <span v-else>{{ row.estimateQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="140px" label="预估时长（分钟）">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.estimateTimeLength" type="number" />
          </template>
          <span v-else>{{ row.estimateTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="样片确认">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <!-- <el-date-picker
              v-model="corsesList.sampleConfirmDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker> -->
            <el-select v-model="corsesList.sampleConfirm" filterable>
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </template>
          <span v-else>{{ row.sampleConfirm | qrFilter }}</span>
        </template>

        <!-- <template slot-scope="{row}">
           <span>{{ row.contractDeliveryTime }}</span>
        </template>-->
      </el-table-column>

      <el-table-column align="center" width="120px" label="开始拍摄日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.shootStartDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
          </template>
          <span v-else>{{ row.shootStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="开始制作日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.makeStartDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
          </template>
          <span v-else>{{ row.makeStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="项目交付日期">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.projectDeliveryDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
          </template>
          <span v-else>{{ row.projectDeliveryDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="拍摄数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.shootQuantity" />
          </template>
          <span v-else>{{ row.shootQuantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="初版数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.firstEditionQuantity" />
          </template>
          <span v-else>{{ row.firstEditionQuantity }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="终版数量">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.endEditionQuantity" />
          </template>
          <span v-else>{{ row.endEditionQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px" label="终版时长">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input
              v-model="corsesList.endEditionTimeLength"
              placeholder="hh:mm:ss格式"
            />
          </template>
          <span v-else>{{ row.endEditionTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="宣传片">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <!-- <el-input v-model="corsesList.businessSundryFee"></el-input> -->
            <el-select v-model="corsesList.isTrailer" filterable placeholder="请选择">
              <el-option label="已制作" value="2" />
              <el-option label="未制作" value="1" />
              <el-option label="无" value="0" />
            </el-select>
          </template>
          <span v-else>{{ row.isTrailer | statusxcFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="完成度">
        <template slot-scope="{ row }">
          <span>{{ row.degreeOfCompletion }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="课程合同金额">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.contractAmount" type="number" />
          </template>
          <span v-else>{{ row.contractAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="已回款">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.contractPaymentReceived" />
          </template>
          <span v-else>{{ row.contractPaymentReceived }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="未回款">
        <template slot-scope="{ row }">
          <!-- <template v-if="row.rowEdit">
            <el-input v-model="corsesList.contractOutstandingPayment"></el-input>
          </template> -->
          <span>{{ row.contractOutstandingPayment }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="150px"
        label="预估供应商总金额"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.estimatedGenerationCost" />
          </template>
          <span v-else>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="供应商已结款"
      >
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="供应商未结款"
      >
        <template slot-scope="{ row }">
          <span>{{ row.supplierUnpaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="上线平台">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.onlinePlatform" />
          </template>
          <span v-else>{{ row.onlinePlatform }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="上线情况">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              v-model="corsesList.onlineName"
              filterable
              placeholder="请选择"
              @change="handleChangePro6($event)"
            >
              <el-option
                v-for="item in CourseLineState"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <span v-else>{{ row.onlineName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="合同交付时间"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="corsesList.contractDeliveryDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            />
          </template>
          <span v-else>{{ row.contractDeliveryDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="课程进度">
        <template slot-scope="{ row }">
          <span>{{ row.courseScheduleName }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态">

        <template slot-scope="{ row }">
          <template v-if="row.rowEdit==true&&roleName=='admin'||row.rowEdit==true&&isRoldB==4">

            <el-select v-model="corsesList.courseState" @visible-change="changeType(row)">
              <el-option
                v-for="item in courseStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />

            </el-select>
          </template>
          <span v-else>{{ row.courseState }}</span>
        </template>

      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="课程进度备注"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.courseScheduleRemark" />
          </template>
          <span v-else>{{ row.courseScheduleRemark }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="120px" label="上传验收单">
        <template slot-scope="{ row }">

          <template v-if="row.rowEdit&&cousreStateTemp=='已交付'">
            <el-button type="text" @click="handleFile(row.id)">点击上传</el-button>

          </template>
          <!-- <span v-else>{{ fileTest}}</span> -->
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="200px" label="验收单描述">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="corsesList.acceptanceReportDesc" />
          </template>
          <span v-else>{{ row.acceptanceReportDesc }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" width="270">
        <template slot-scope="{ row }">
          <!-- <el-button
              v-show='roleName=="admin"'
              class="mg-l"
              type="info"
                 @click="handleEditStatus(row)"
              size="mini"
              icon="el-icon-s-tools"
              >编辑课程状态</el-button> -->
          <router-link
            :to="
              '/po_course_supplier?id=' +
                row.id +
                '&poId=' +
                row.poId +
                '&po=' +
                row.po +
                '&name=' +
                row.courseName +
                '&course=' +
                row.courseChargeName+'&page='+listQuery.page
            "
            class="link-type"
          >
            <el-button
              class="mg-l"
              type="warning"
              size="mini"
              icon="el-icon-s-tools"
            >分配供应商</el-button>
          </router-link>

          <el-button
            v-if="row.rowEdit"
            type="success"
            size="mini"
            style="margin-left: 10px"
            icon="el-icon-circle-check-outline"
            @click="confirmRole(row)"
          >保存</el-button>
          <el-button
            v-else
            type="primary"
            size="mini"
            style="margin-left: 10px"
            :disabled="editDisabled == true"
            icon="el-icon-edit"
            @click="handleEdit(row)"
          >编辑</el-button>

          <el-button
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDel(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="上传验收单" :visible.sync="dialogFormVisible" width="75%">
      <el-form :model="formYSD" :rules="rules">
        <el-form-item label="验收时长" label-width="180" prop="receptTimeLength">
          <el-input v-model="formYSD.receptTimeLength" style="width:180px" placeholder="hh:mm:ss" autocomplete="off" />
          <span style="color:red;font-weight:bold">例:00:00:00</span>
        </el-form-item>
        <el-form-item label="上传验收单" label-width="180">
          <el-upload
            :data="dataObj"
            :show-file-list="false"
            class="upload-demo"
            :before-upload="beforeUpload"
            action="http://123.57.59.222:8081/api/file/course_acceptance_report/upload"
            :on-success="handlePreview"
          >
            <!-- <el-button size="mini" type="primary">点击上传</el-button> -->
            <i class="el-icon-upload" />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-table
            :data="evaluates"
            height="250"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="supplierName"
              label="供应商名称"
              width="300"
            />
            <el-table-column
              prop="serviceType"
              label="服务类型"
            />
            <el-table-column
              label="拍摄水平"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.shootLevel != -1">
                  <el-input v-model="evaluates[scope.$index].shootLevel" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="制作+后期"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.postProduction != -1">
                  <el-input v-model="evaluates[scope.$index].postProduction" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="二维交付水平"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.delivery2Level != -1">
                  <el-input v-model="evaluates[scope.$index].delivery2Level" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="三维交付水平"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.delivery3Level != -1">
                  <el-input v-model="evaluates[scope.$index].delivery3Level" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="服务态度"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.serviceAttitude != -1">
                  <el-input v-model="evaluates[scope.$index].serviceAttitude" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="如期交付"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.deliverySchedule != -1">
                  <el-input v-model="evaluates[scope.$index].deliverySchedule" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="沟通能力"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.communicateSkill != -1">
                  <el-input v-model="evaluates[scope.$index].communicateSkill" type="number" min="0" max="5" step="0.1" @input="checkValue" />
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="评价"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.appraise != -1">
                  <el-input v-model="evaluates[scope.$index].appraise" />
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleYSD()">确 定</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  courseListF,
  updateCourses,
  delCourse,
  contractPO,
  getProvinces,
  poCourses,
  getCourseStatus,
  getSupplierEvaluateInfo,
  updateEvaluateInfo
} from '@/api/supplier'
import {
  getProductType,
  getContractType,
  getCourseType,
  getShootMode,
  getCourseCharge,
  getCourseExchange,
  getCourseSchedule,
  getCourseLineState,
  getSubjectCate,
  baseUrl2
} from '@/api/remote-search'
import { exportPocourse } from '@/api/exportExcel'
import { regiosList } from '@/api/user'
import { RegionsProvince } from '@/api/region'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'CorsesList',
  components: { Pagination },
  filters: {
    qrFilter(status) {
      const statusMap = {
        0: '未确认',
        1: '已确认'
      }
      return statusMap[status]
    },
    statusColorFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger',
        3: 'warning',
        4: 'info',
        5: ' '
      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已过期',
        0: '新合同'
      }
      return statusMap[status]
    },
    statusxcFilter(status) {
      const statusMap = {
        1: '未制作',
        2: '已制作',

        0: '无'
      }
      return statusMap[status]
    }
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验收时长不能为空'))
      }
      setTimeout(() => {
        if (value) {
          var regS = new RegExp('\\：', 'g')
          value = value.replace(
            regS,
            ':')
          const tempTime = value
          const temp = tempTime.split(':')
          if (temp[1] > 60 || temp[2] > 60) {
            return callback(new Error('请输入正确的时间格式，分钟和秒不能大于60'))
          }
        }
      }, 1000)
    }
    return {
      isRoldB: sessionStorage.getItem('roidB'),
      rules: {
        receptTimeLength: [
          { validator: checkAge, trigger: 'blur' }
        ] },
      formYSD: {
        receptTimeLength: ''
      }, // 验收单
      dialogFormVisible: false, // 上传验收单
      showbtns: false,
      list: [],
      editDisabled: false,
      dataObj: { id: '', receptTimeLength: null },
      fileTest: '',
      uploadUrl: '',
      roleName: sessionStorage.getItem('memberName'),
      downloadLoading: false,
      courseList: [], // 课程编导list
      courseChargeList: [], // 课程编导
      courseExchange: [], // 前期课程进度
      courseTypeList: [], // 课程类别
      shootModeList: [], // 拍摄形式
      CourseSchedule: [], // 课程进度
      CourseLineState: [], // 课程上线状态
      subjectTypeList: [], // 学科门类
      onlineList: [], // 上线情况
      majorList: [], // 专业分类
      multipleSelection: '', // 多选
      isSure: true,
      rowEdit: false,
      newPoId: '', // 新增之后返回的id

      productTypeList: [], // 课程编导集合
      productLineList: [], // 课程ID集合
      contracTypeList: [], // 合同类型
      provinceList: [], // 战区省份
      allProvinceList: [], // 所有省份
      regiosList: [], // 讲师姓名
      corsesList: {},
      total: 0,
      cousreStateTemp: '', // 获取po状态
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem('token'),
        page: 1,
        provinceName: '',
        customerName: '',
        regionName: '',
        po: '',
        pageSize: 20
      },

      poId: '', // POid
      rolesList: [], // 角色集合

      dialogVisible: false, // 弹出框隐藏
      dialogType: 'new',
      checkStrictly: false,

      ids: '',
      idsPo: '',
      courseStateOptions: [{
        value: '未启动',
        label: '未启动',
        disabled: true
      }, {
        value: '进行中',
        label: '进行中',
        disabled: true
      }, {
        value: '已交付',
        label: '已交付',
        disabled: true
      }, {
        value: '已验收',
        label: '已验收',
        disabled: true
      }, {
        value: '已完结',
        label: '已完结',
        disabled: true
      },
      {
        value: '已终止',
        label: '已终止',
        disabled: false
      }],
      evaluates: []
    }
  },
  computed: {},
  created() {
    this.listQuery.page = parseInt(this.$route.query.page)

    this.getList()
    this.getListes()
  },

  methods: {
    changeType(e) {
      const _this = this

      this.courseStateOptions.forEach((v, i) => {
        if (this.roleName === 'admin') {
          v.disabled = false
          return false
        }
        const c = i + 1
        if (_this.cousreStateTemp === '已交付') {
          this.courseStateOptions[4].disabled = true
          return false
        }
        if (v.label === _this.cousreStateTemp) {
          this.courseStateOptions[c].disabled = false
        }
      })
      this.courseStateOptions[5].disabled = false
    },
    handleClose() {
      this.editDisabled = false
    },
    UploadUrl() {
      return baseUrl2 + '/api/file/import_po_course'
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns
    },
    handleImageSuccess(file) {
      if (file.code === 200) {
        this.$message.success(file.message)
        this.getList()
      } else {
        this.$message.error(file.message)
      }
    },
    handlePreview(file) {
    //  this.$message.success('验收单上传成功')
      console.log(file)
      if (file.code !== 200) {
        this.$message.error(file.message)
      } else {
        this.$message.success(file.message)
      }
    },
    handleError(file) {
      this.$message.error('验收单上传失败')
    },
    dowloadExcel() {
      exportPocourse(this.listQuery)
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_po_course?customerName=" +
      //   this.listQuery.customerName +
      //   "&provinceName=" +
      //   this.listQuery.provinceName +
      //   "&regionName=" +
      //   this.listQuery.regionName;
    },

    getListes() {
      console.log(this.isRoldB + 'hhhhh')
      getProvinces().then((res) => {
        this.allProvinceList = res.data.data
      })
      getProductType().then((res) => {
        this.productTypeList = res.data.data
      })
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data
      })
      getContractType().then((res) => {
        this.contracTypeList = res.data.data
      })
      // getProvinces().then((res) => {
      //   this.provinceList = res.data.data;
      // });
      regiosList().then((res) => {
        this.regiosList = res.data.data
      })
      getCourseExchange().then((res) => {
        this.courseExchange = res.data.data
      })
      getCourseType().then((res) => {
        this.courseTypeList = res.data.data
      })
      getShootMode().then((res) => {
        this.shootModeList = res.data.data
      })
      getCourseSchedule().then((res) => {
        this.CourseSchedule = res.data.data
      }),
      getCourseLineState().then((res) => {
        this.CourseLineState = res.data.data
      })
      getSubjectCate().then((res) => {
        this.subjectTypeList = res.data.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      const res = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id)
        })
        this.idsPo = res.join(',')
      }
    },
    handleChangePro(id) {
      let obj = {}
      obj = this.productTypeList.find((item) => {
        return item.name === id
      })

      this.corsesList.productTypeId = obj.id
    },
    handleChangePro2(id) {
      let obj = {}
      obj = this.courseExchange.find((item) => {
        return item.name === id
      })
      this.corsesList.earlyExchangeId = obj.id
    },
    handleCouseChangeName(id) {
      let obj = {}
      obj = this.courseChargeList.find((item) => {
        return item.name === id
      })
      this.corsesList.courseChargeId = obj.id
    },
    handleChangeSubject(id) {
      let obj = {}
      obj = this.subjectTypeList.find((item) => {
        return item.name === id
      })
      this.corsesList.subjectCategoryId = obj.id
    },

    handleChangePro4(id) {
      let obj = {}
      obj = this.regiosList.find((item) => {
        return item.region === id
      })
      this.corsesList.regionId = obj.id
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data
      })
    },
    handleChangeCourse(id) {
      let obj = {}
      obj = this.courseChargeList.find((item) => {
        return item.name === id
      })
      this.corsesList.courseChargeId = obj.id
    },
    handleChangePro5(id) {
      let obj = {}
      obj = this.courseTypeList.find((item) => {
        return item.name === id
      })
      this.corsesList.courseTypeId = obj.id
    },
    handleChangePro6(id) {
      let obj = {}
      obj = this.CourseLineState.find((item) => {
        return item.name === id
      })
      this.corsesList.onlineId = obj.id
    },
    beforeUpload() {
      this.dataObj.id = this.corsesList.id
      this.dataObj.receptTimeLength = this.formYSD.receptTimeLength
    },
    handleChangePro7(id) {
      let obj = {}
      obj = this.shootModeList.find((item) => {
        return item.name === id
      })
      this.corsesList.shootModeId = obj.id
    },

    handleChangePro8(id) {
      let obj = {}
      obj = this.CourseSchedule.find((item) => {
        return item.name === id
      })
      this.corsesList.courseScheduleId = obj.id
    },
    // 点击上传验收单
    //
    handleFile(id) {
      getSupplierEvaluateInfo(id).then(res => {
        this.evaluates = res.data.data
        console.log(this.evaluates)
      })

      this.formYSD.receptTimeLength = ''
      this.dialogFormVisible = true
    },
    getList() {
      this.editDisabled = false
      this.listLoading = true
      courseListF(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows
          this.total = response.data.data.total

          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleDel(id) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          delCourse(id).then((res) => {
            if (res.data.code === '200') {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    handleEdit(row) {
      console.log(row)
      this.editDisabled = true
      this.dialogType = 'edit'

      getCourseStatus(row.id).then(res => {
        this.cousreStateTemp = res.data.message
        console.log(this.cousreStateTemp)
      })
      this.corsesList = row
      row.rowEdit = !row.rowEdit
      this.corsesList.id = row.id
      this.courseStateOptions.forEach((v) => {
        v.disabled = true
      })
    },
    handleAdd() {
      // this.role = Object.assign({}, defaultRole);

      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleYSD() {
      updateEvaluateInfo(this.evaluates).then(res => {
        console.log(res)
      })

      this.getList()
      this.dialogFormVisible = false
    },
    confirmRole(row, id) {
      const isEdit = this.dialogType === 'edit'
      if (isEdit) {
        this.corsesList.rowEdit = false
        if (this.corsesList.endEditionTimeLength) {
          var regS = new RegExp('\\：', 'g')
          this.corsesList.endEditionTimeLength = this.corsesList.endEditionTimeLength.replace(
            regS,
            ':')
          const tempTime = this.corsesList.endEditionTimeLength
          const temp = tempTime.split(':')
          if (temp[1] > 60 || temp[2] > 60) {
            this.$message.error('请输入正确的时间格式，分钟和秒不能大于60')

            row.rowEdit = true
            return false
          }
        }
        this.corsesList.contractOutstandingPayment =
          this.corsesList.contractAmount -
          this.corsesList.contractPaymentReceived
        updateCourses(this.corsesList).then((res) => {
          if (res.data.code === '200') {
            this.$message.success(res.data.message)
            row.rowEdit = false
            // this.dialogVisible = false;
            this.getList()
            this.editDisabled = false
          } else {
            this.$message.error(res.data.message)
          }
        })
        return false
      }
      const _this = this

      // addCourses(this.corsesList).then((res) => {

      //   if ((res.data.code = "200")) {
      //     this.newPoId = res.data.code;
      //     this.$message.success(res.data.message);
      //     this.dialogVisible = false;

      //     this.courseList = ""; //清空新增数组
      //     this.getList(this.poId);
      //   }
      // });
    },

    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = [
          'id',
          'title',
          'author',
          'pageviews',
          'display_time'
        ]
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    checkValue(value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
